<template>
  <ChartComp id="purchaseContract" :message="purchaseContractMessage" @clickChartItem="clickChartUnit" />
</template>

<script>
export default {
  components: {
  },
  props: {
    id: {
      require: true,
      type: String,
      default: ''
    },
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    id: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      purchaseContractMessage: {}
    }
  },
  created() { this.initMessage() },
  mounted() {
  },
  methods: {
    initMessage() {
      this.purchaseContractMessage = {
        grid: {
          left: '20',
          right: '50',
          top: '0',
          bottom: '20',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          textStyle: {
            color: '#fff'
          },
          className: 'LineChart-tooltip',
          extraCssText: `background-color: rgba(0, 21, 50, 0.8);
                color: #fff;
                border: 1px solid #214D87;
                border-color: #214D87;
                box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
                border-radius: 4px;`,
          formatter: function (params) {
            var res =
              params[0].name + '<br/>' + '数量：' + params[0].value + '个'
            return res
          }
        },
        xAxis: {
          type: 'value',
          boundaryGap: true,
          axisTick: {
            alignWithLabel: true
          },
          splitLine: {
            show: false,
            alignWithLabel: true,
            lineStyle: {
              type: 'dashed',
              color: '#214D87'
            }
          },
          axisLabel: {
            color: '#7CB4FF',
            // rotate: 45,
            interval: 0
          },
          axisLine: {
            lineStyle: {
              type: 'dashed',
              color: '#214D87'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['陆军', '海军', '空军', '火箭军', '战略支援部队', '军事科学院', '国防大学', '国防科技大学', '武警部队', '战区'].reverse(),
          minInterval: 1,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#214D87'
            }
          },
          axisLabel: {
            color: '#7CB4FF'
          },
          boundaryGap: ['0%', '20%'],
          axisLine: {
            show: false,
            lineStyle: {
              type: 'dashed',
              color: '#214D87'
            }
          }
        },
        series: [
          {
            data: [160, 320, 540, 690, 760, 780, 880, 980, 1400, 1489],
            type: 'bar',
            showBackground: false,
            backgroundStyle: {
              color: '#08377B'
            },
            itemStyle: {
              color: () => {
                return new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 0, color: '#1864C3' },
                  { offset: 1, color: '#0085FF' }
                ])
              }
            },
            label: {
              //设置label显示
              show: true,
              position: 'right',
              distance: 10,
              fontSize: 14,
              color: '#B5C5D4'
            }
          }
        ]
      }
    },
    clickChartUnit(val) {
      console.log('%c [ val ]-153', 'font-size:13px; background:pink; color:#bf2c9f;', val)
      this.$router.push({ name: 'largeUnitsChart' })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
